<template>
  <div class="page splitBill">
    <div class="scroll-view">
      <customHeader middleTitle="分账"/>
      <span class="top-tips" v-if="isOpenSplit != '0'">注意：因分账订单已划款到分账方，暂不支持退款</span>
      <div class="page-body">
        <div v-if="isOpenSplit == '0'" class="not-activated-content">
          <div>
            <img class="split-bill-ad" src="../../../static/images/splitBillAD.png" />
          </div>
          <div class="line-space"></div>
        </div>
        <div v-else class="activated-content">
          <no-data msg="暂无数据" v-if="!loading&&billedStoresList==null&&unbilledStoresList==null&&cannotBilledStoresList==null"></no-data>
          <div
            class="scroll-wrap"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
            >
            <div v-if="billedStoresList">
              <div class="section-title">
                <span>分账门店</span>
              </div>
              <ul class="table">
                <li class="item"
                v-for="(item,index) in billedStoresList"
                :key="index">
                  <img src="../../../static/images/billedStores.png" />
                  <span>{{ item.shopName }}</span>
                  <span class="option" @click="showStoreDetail(item)">查看分账方</span>
                </li>
              </ul>
            </div>
            <div v-if="unbilledStoresList">
              <div class="section-title">
              <span>可分账门店</span>
              </div>
              <ul class="table">
                <li class="item"
                v-for="(item,index) in unbilledStoresList"
                :key="index">
                  <img src="../../../static/images/unbilledStores.png" />
                  <span>{{ item.shopName }}</span>
                  <span class="option" @click="addSplitBillStore(item)">增加分账方</span>
                </li>
              </ul>
            </div>
            <div v-if="cannotBilledStoresList">
              <div class="section-title">
              <span>不可分账门店</span>
              </div>
              <ul class="table">
                <li class="item"
                v-for="(item,index) in cannotBilledStoresList"
                :key="index">
                  <img src="../../../static/images/cannotBilledStores.png" />
                  <span class="cannotBilledStoreName">{{ item.shopName }}</span>
                  <span class="option" @click="reasonDetail(item)">查看原因</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isOpenSplit == '0'" class="not-activated-content-bottom">
      <div class="form-title-center">
        <i :class="isChecked?'zhk-ty':'zhk-wxz'" @click="toggleCheckbox"/>
        <label @click="toggleCheckbox">
        我已阅读并同意
        </label>
        <span @click="jumpToserviceContract">《金多多商家分账协议》</span>
      </div>
      <div class="btn-wrap">
        <span class="btn" :class="{disabled:disabledSubmit}" @click="activateSplitBill">同意开通</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { MessageBox, Toast } from "mint-ui";
import noData from "../../components/noData/noData";
import jsBridge from "../../tools/jsBridge.js";

export default {
  name: "splitBill",
  data() {
    return {
    loading: false,
    isChecked:false,
    noMore: false,
    currentPage: 1, //当前页
    pageSize: 10, //每页显示大小
    disabledSubmit: true,
    isOpenSplit: '',
    supplierId: '',
    billedStoresList: null,
    unbilledStoresList: null,
    cannotBilledStoresList: null
    };
  },
  methods: {
    toggleCheckbox() {
      this.isChecked = !this.isChecked;
      this.disabledSubmit = !this.isChecked;
    },
    jumpToserviceContract() {
      window.location.href = "http://shop.jindd.com.cn/browser/splitBillAgreement.html?showGoBack=true";
    },
    // 查询是否开通分账接口
    queryIsOpenSplitBill() {
      let _this = this;
      let url = "/newapp/shopSplit/querySelfSupplier.do";
      this.ajax({
        url: url,
        type: "post",
        controlLoading: true,
        data: {supplierId: this.supplierId}
      })
      .then((res) => {
        _this.loading = false;
        _this.isOpenSplit = res.resultObject.isOpenSplit;

        if (_this.isOpenSplit == "1") {
          _this.loadMore();
        }
      })
      .catch((err) => {

      });
    },
    // 申请开通分账
    activateSplitBill() {
      if (this.disabledSubmit) {
        return;
      }

      let _this = this;
      let url = "/newapp/shopSplit/updateYzSelfSupplier.do";
      this.ajax({
        url: url,
        type: "post",
        controlLoading: true,
        data: {"supplierId" : this.supplierId, "isOpenSplit" : '1'},
      })
      .then((res) => {
        _this.loading = false;
        _this.noMore = false;
        if (res.success) {
          Toast("开通分账成功");
          setTimeout(() => {
            _this.isOpenSplit = "1";
          }, 1000);

        } else {
          Toast("开通分账失败，请稍后再试");
        }
      })
      .catch((err) => {

      });
    },
    // 加载更多
    loadMore() {
      if (this.loading || this.noMore || this.isOpenSplit == "") {
        return;
      }
      this.currentPage++;
      this.loadData();
    },
    // 分页查询商户分账门店列表
    loadData() {
      let _this = this;
      this.loading = true;
      let url = "/newapp/shopSplit/getSplitShopList.do";
      this.ajax({
        url: url,
        type: "post",
        data : {"currentPage" : _this.currentPage, "pageSize" : _this.pageSize},
        controlLoading: true
      })
      .then((res) => {
        _this.loading = false;
        _this.noMore = false;
        if (res.success) {
          const data = res.resultObject;
          //最后一页将noMore设置为true
          if (data != null && JSON.stringify(data) != "{}") {
            if (data.nextPage > _this.currentPage) {
              _this.nextPage = data.nextPage;
            } else {
              _this.noMore = true;
            }
            _this.bindData(data.pageData);
          } else {
            _this.noMore = true;
          }
        } else {
          t_thishis.noMore = true;
          Toast(res.msg);
        }
      })
      .catch((err) => {

      });
    },
    bindData(data) {
      if (data == null) {
        return;
      }

      var tempUnbilledStoresList = [];
      var tempBilledStoresList = [];
      var tempCannotBilledStoresList = [];

      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        if (item.splitAccountStatus == '0') {
          // 增加分账方
          tempUnbilledStoresList.push(item);
        }
        else if (item.splitAccountStatus == '1') {
          // 查看分账方
          tempBilledStoresList.push(item);
        }
        else if (item.splitAccountStatus == '2') {
          // 不可开通分账
          tempCannotBilledStoresList.push(item);
        }
      }

      this.unbilledStoresList = tempUnbilledStoresList.length > 0 ? tempUnbilledStoresList : null;
      this.billedStoresList = tempBilledStoresList.length > 0 ? tempBilledStoresList : null;
      this.cannotBilledStoresList = tempCannotBilledStoresList.length > 0 ? tempCannotBilledStoresList : null;
    },
    showStoreDetail(item) {
      this.$router.push({ path: "/splitBill/billedStoreConfig", query: {shopInfo: JSON.stringify(item)}});
    },
    addSplitBillStore(item) {
      this.$router.push({ path: "/splitBill/billedStoreConfig/addSplitBill", query: {billedStoresCount: 0, shopInfo: JSON.stringify(item)}});
    },
    reasonDetail(item) {
      if (item.noSplitAccountDesc == '支付渠道不正确') {
        // 不支持开通钱包
        let _this = this;
        MessageBox.confirm('',{
          title:'',
          message:'<div style="text-align:center;color: #172735;font-size: 15px;font-weight: 400;line-height: 25px;margin: 20px 10px 20px 10px;">当前门店所在通道不支持开通分账功能如需使用该功能请联系客户经理</div>',
          confirmButtonText:'我知道了',
          cancelButtonText:'联系客户经理'
        }).catch(error =>{
          if (error == 'cancel') {
            _this.$router.push({ path: "/concat", query: {shopInfo: item}});
          }
        });
      }
      else if (item.noSplitAccountDesc == '未开通电子钱包') {
        let _this = this;
        MessageBox.confirm('',{
          title:'',
          message:'<div style="text-align:center;color: #172735;font-size: 15px;font-weight: 400;line-height: 25px;margin: 20px 10px 20px 10px;">当前门店未开通钱包功能\b如需使用分账，请先开通钱包功能</div>',
          confirmButtonText:'去开通钱包',
          cancelButtonText:'暂不开通'
        }).then(action => {
          if (action == 'confirm') {
            _this.applyWallet(item);
          }
        }).catch(error =>{

        });
      }
      else if (item.noSplitAccountDesc == '小微商户不可开通') {
        let _this = this;
        MessageBox.confirm('',{
          title:'',
          message:'<div style="text-align:center;color: #172735;font-size: 15px;font-weight: 400;line-height: 25px;margin: 20px 10px 20px 10px;">小微商户不可开通分账，如需使用该功能请联系客户经理</div>',
          confirmButtonText:'我知道了',
          cancelButtonText:'联系客户经理'
        }).catch(error =>{
          if (error == 'cancel') {
            _this.$router.push({ path: "/concat", query: {shopInfo: item}});
          }
        });
      }
      else {
        this.$router.push({ path: "/splitBill/processResult", query: {shopInfo: item}});
      }
    },
    //开通钱包
    applyWallet(item) {
      let params =  {supplierId: item.supplierId, shopId: item.id};
      var url = "/newapp/shop/hasOpenWallet.do";
      this.ajax({
        url: url,
        type: "post",
        data: params,
        controlLoading: true
      })
      .then((res) => {
        if (res.success) {
          jsBridge.gotoWallet({walletId: item.merchantId});
        }
        else {
          MessageBox.alert(res.msg);
        }
      })
      .catch((err) => {

      });
    },
  },
  components: {
    customHeader,noData
  },
  created() {
    CommonUtil.getUserInfo().then(userInfo => {
      this.supplierId = userInfo.yzSupplierId;
      if (this.supplierId != undefined && this.supplierId.length > 0) {
        this.queryIsOpenSplitBill();
      }
      else {
        Toast("缺少商户编号，请稍后再试");
      }
    });
  },
  mounted() {

  },
};
</script>
<style lang='scss' scoped>
@import "splitBill";
</style>
